<!--
  * 时间：2024/11/25
  * 作者：刘岩
  * 描述：大屏
-->
<template>
  <div class="large">
    <div class="title">
      <span>智慧博物馆客流系统</span>
    </div>
    <div class="time">{{ currentTime  }}</div>
    <div class="content">
      <div class="left">
        <div class="box">
          <title-bar titleName="客流统计"></title-bar>
          <flow-statistics :shopId="shopList[0].hkRegionIndexCode"></flow-statistics>
        </div>
        <div class="box">
          <title-bar titleName="今日客流趋势"></title-bar>
          <today-flow :groups="countGroupGroup"></today-flow>
        </div>
        <div class="box">
          <title-bar titleName="区域客流排行"></title-bar>
          <area-flow-sort :data="areaFlowSort"></area-flow-sort>
        </div>
      </div>
      <div class="center">
        <div class="top">
          <heat-pic :code.sync="hallGroup[0].hkRegionIndexCode"></heat-pic>
          <div class="top-pos">
            <span
              v-for="item in hallGroup"
              :key="item.hkRegionIndexCode"
              class="pos-span"
              :class="{'active': densityGroupId === item.hkRegionIndexCode}"
              @click="densityGroupId = item.hkRegionIndexCode"
            >
              {{ item.hallName }}
            </span>
          </div>
        </div>
        <div class="bottom">
          <div class="box left">
            <title-bar titleName="历史客流趋势" :isDateTabs="true" @dateClick="(sort) => dateClick(sort)"></title-bar>
            <history-flow :groups="countGroupGroup" :type="historyFlowType"></history-flow>
          </div>
<!--          <div class="box right"></div>-->
        </div>
      </div>
      <div class="right">
        <div class="box">
          <title-bar :titleName="hallName + '展厅关注度排行榜'"></title-bar>
          <area-flow-sort :data="hallList"></area-flow-sort>
        </div>
        <div class="box">
          <title-bar titleName="热门展品关注度排行榜"></title-bar>
          <area-flow-sort :data="shopExList"></area-flow-sort>
        </div>
        <div class="box">
          <title-bar titleName="人员密度报警"></title-bar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleBar from "./components/titleBar";
import FlowStatistics from '@/views/large/components/flowStatistics';
import TodayFlow from '@/views/large/components/todayFlow';
import AreaFlowSort from '@/views/large/components/areaFlowSort';
import HistoryFlow from '@/views/large/components/historyFlow';
import HeatPic from './components/heatPic';
import { countGroupGroupsPage } from '@/api/flow';
import { listHall } from '@/api/exhibitionHallManage';
import { listShop } from "@/api/venueManage";
import { passengerRankingTop, areaAreaInfo, groupcameraList, heatMapList } from '@/api/large';
export default {
  name: 'Large',
  components: {
    TitleBar,
    FlowStatistics,
    TodayFlow,
    AreaFlowSort,
    HistoryFlow,
    HeatPic
  },
  data () {
    return {
      currentTime: '',
      // 客流统计组
      countGroupGroup: [],
      // 密度统计组
      densityGroup: [],
      // 密度统计组（展厅）
      hallGroup: [{}],
      // 所选密度统计组Id
      densityGroupId: '',
      // 展厅名称
      hallName: '',
      // 区域客流排行数据
      areaFlowSort: [],
      // 历史客流趋势格式标识
      historyFlowType: 'day',
      // 展馆数据
      shopList: [{}],
      // 展厅展品数据
      hallList: [
        {
          groupId: '',
          groupName: '妇好鸮尊',
          peopleNumber: '300',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '四羊方尊',
          peopleNumber: '220',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '三彩载乐骆驼俑',
          peopleNumber: '210',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '金丝篓衣',
          peopleNumber: '165',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '银白釉',
          peopleNumber: '158',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '象牙白',
          peopleNumber: '108',
          regionId: ''
        }
      ],
      // 展馆展品数据
      shopExList: [
        {
          groupId: '',
          groupName: '妇好鸮尊',
          peopleNumber: '300',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '青铜树枝',
          peopleNumber: '288',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '人首蛇身玉饰',
          peopleNumber: '263',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '四羊方尊',
          peopleNumber: '220',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '三彩载乐骆驼俑',
          peopleNumber: '210',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '金丝篓衣',
          peopleNumber: '165',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '银白釉',
          peopleNumber: '158',
          regionId: ''
        },
        {
          groupId: '',
          groupName: '象牙白',
          peopleNumber: '108',
          regionId: ''
        }
      ]
    }
  },
  created() {
    // 更新时间
    this.updateTime();
    // 每秒更新一次时间
    setInterval(this.updateTime, 1000);
    this.getShop(); // 请求展馆
  },
  methods: {
    /**
     * 时间：2024/11/25
     * 作者：刘岩
     * 功能：时间转换
     */
    updateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleString();
    },
    /**
     * 时间：2024/11/29
     * 作者：刘岩
     * 功能：查询客流统计组、密度统计组、关注度统计组
     * type: 1 客流； 2 密度； 3：关注度
     */
    getCountGroupGroupsPage(type, code) {
      return new Promise((resolve) => {
        countGroupGroupsPage({
          pageNo: 1,
          pageSize: 999,
          groupType: type,
          regionId: code,
          isCascade: 1,
          statType: 1
        }).then(res => {
          // 转换数据
          resolve(JSON.parse(res.msg).data.list);
        });
      });
    },
    /**
     * 时间：2024/12/24
     * 作者：刘岩
     * 功能：查询展馆(统计组)
     */
    getShop() {
      listShop({
        pageNum: 1,
        pageSize: 9999,
        tenantId: this.$store.getters.tenantId
      }).then(res => {
        this.shopList = res.rows;
        this.getHall(); // 请求展厅
        // 请求客流统计组
        this.getCountGroupGroupsPage(1, this.shopList[0].hkRegionIndexCode).then(resolve => {
          this.countGroupGroup = resolve;
        });
        // 调用查询区域客流排行数据
        this.areaSort(this.shopList[0].hkRegionIndexCode);
      });
    },
    /**
     * 时间：2024/11/29
     * 作者：刘岩
     * 功能：查询展厅(统计组)
     */
    getHall() {
      listHall({
        pageNum: 1,
        pageSize: 9999,
        tenantId: this.$store.getters.tenantId,
        shopId: this.shopList[0].shopId
      }).then(res => {
        // 转换数据
        this.hallGroup = res.rows.reverse();
        this.densityGroupId = this.hallGroup[0].hkRegionIndexCode; // 默认赋值第一个展厅统计组
        this.hallName = this.hallGroup[0].hallName; // 默认赋值第一个展厅统计组名称
        // 请求关注度统计组
        this.getCountGroupGroupsPage(3, this.hallGroup[0].hkRegionIndexCode).then(resolve => {
          this.getAreaAreaInfo(resolve);
        });
        this.heatMapList(this.hallGroup[0].hkRegionIndexCode);
      });
    },
    /**
     * 时间：2024/12/4
     * 作者：刘岩
     * 功能：sort：day、日 month：月 year：年 date：日期
     */
    dateClick(sort) {
      this.historyFlowType = sort;
    },
    /**
     * 时间：2024/12/5
     * 作者：刘岩
     * 功能：查询区域客流排行数据
     * code: 展馆层级区域code（统计组id）
     */
    areaSort(code) {
      // 拼接查询参数
      let startTime = this.$dayjs().startOf('day').format(); // 开始时间
      let endTime = this.$dayjs().endOf('day').format(); // 结束时间
      passengerRankingTop({
        startTime,
        endTime,
        regionId: code,
        granularity: 'daily',
        order: 'desc',
        topNumber: 30,
        isCascade: 1
      }).then(res => {
        this.areaFlowSort = JSON.parse(res.msg).data;
        console.log(this.areaFlowSort)
      });
    },
    /**
     * 时间：2024/12/25
     * 作者：刘岩
     * 功能：根据统计组id获取区域关注度相机分割区域信息
     */
    getAreaAreaInfo(code) {
      // 处理密度统计组id
      let ids = code.map(item => item.groupId)
      areaAreaInfo({
        countGroupId: ids.join(','),
        pageSize: 999,
        pageNo: 1
      }).then(res => {
        console.log(JSON.parse(res.msg))
      });
    },
    /**
     * 时间：2025/1/2
     * 作者：刘岩
     * 功能：查询热度图列表
     */
    heatMapList(code) {
      // 拼接查询参数
      let startTime = this.$dayjs().startOf('day').format(); // 开始时间
      let endTime = this.$dayjs().endOf('day').format(); // 结束时间
      heatMapList({
        cameraIndexCodes: code,
        granularity: 'daily',
        startTime,
        endTime
      }).then(res => {
        console.log('000')
        console.log(res)
      });
    }
  }
}
</script>

<style scoped lang="scss">
// 修改滚动条样式，Chrome可用
// 滚动条整体宽度
::-webkit-scrollbar {
  width: 0;
  height: 10px;
}
.large {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0D2042;
  position: relative;
  .title {
    width: 100%;
    height: 116px;
    background: url("../../assets/large/title-bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    line-height: 80px;
    font-size: 46px;
    font-weight: bold;
    & > span {
      background: linear-gradient(to bottom, #fdfdfd, #0671fd);
      -webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent;/*给文字设置成透明*/
    }
  }
  .time {
    color: #6088d4;
    font-size: 26px;
    position: absolute;
    top: 30px;
    left: 50px;
    height: 45px;
    line-height: 45px;
  }
  .content {
    flex: 1;
    width: 100%;
    height: calc(100% - 116px);
    display: flex;
    padding: 0 15px 0 15px;
    .left, .right {
      width: 25%;
      display: flex;
      flex-direction: column;
      .box {
        border: 1px solid #469BF8;
        box-shadow: 0 0 20px #385FDD inset;
        margin-bottom: 15px;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 10px;
      }
    }
    .center {
      flex: 1;
      margin: 0 10px;
      display: flex;
      flex-direction: column;
      .top {
        height: calc(66.7% - 15px);
        margin-bottom: 15px;
        position: relative;
        .top-pos {
          position: absolute;
          //top: 10px;
          right: 10px;
          width: 102px;
          height: 290px;
          top: 50%;
          transform: translateY(-50%);
          overflow-y: auto;
          //background: url(../../assets/large/ul-bg.png) no-repeat;
          //background-size: cover;
          .pos-span {
            display: block;
            color: #ffffff;
            font-size: 16px;
            padding: 8px 0;
            width: 100%;
            text-align: center;
            border-bottom: 3px solid;
            border-image: linear-gradient(90deg, rgba(0,216,247,0.00) 0%, #add6e8 50%, rgba(0,216,247,0.00) 99%) 2 2 2 2;
            cursor: pointer;
          }
          .active {
            color: #01f0ff;
          }
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        flex: 1;
        .box {
          border: 1px solid #469BF8;
          box-shadow: 0 0 20px #385FDD inset;
          margin-bottom: 15px;
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          padding: 10px;
        }
        //.left {
        //  margin-right: 5px;
        //}
        //.right {
        //  margin-left: 5px;
        //}
      }
    }
  }
}
</style>
